<template>
<div>
  <el-form :inline="true" :model="data" size="small" label-width="100px">
    <div class="avatar-container">
      <el-tooltip effect="dark" placement="right" style="float: left">
        <div slot="content">点击修改头像<br>图片大小不超过1MB</div>
        <el-upload
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :file-list="fileList"
          accept=".png, .jpg, .jpeg"
          :limit="1"
          :on-change="selectAvatar"
        >
          <el-avatar :size="100" :src="avatar" fit="cover">
          </el-avatar>
        </el-upload>
      </el-tooltip>
      <div class="avatar-right">
        <div>
          <el-form-item label="昵称：" prop="nickname">
            <el-input v-model="data.name" placeholder="请输入昵称" />
          </el-form-item>
        </div>
        <el-form-item label="手机号：" prop="mobile">
          <el-input v-model="data.mobile" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="邮箱地址：" prop="email">
          <el-input v-model="data.email" placeholder="请输入昵称" />
        </el-form-item>
      </div>
    </div>
    <el-form-item label="性别：" prop="sex">
      <el-radio-group v-model="data.sex">
        <el-radio :label="1">女</el-radio>
        <el-radio :label="2">男</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="年龄：" prop="age">
      <el-input-number v-model="data.age" :min="0" :max="150" style="width: 160px" />
    </el-form-item>
  </el-form>
  <el-form :model="data" size="small" label-width="100px">
    <el-form-item label="个性签名：" prop="sign">
      <el-input
        v-model="data.sign"
        :rows="3"
        type="textarea"
        maxlength="127"
        show-word-limit
        placeholder="添加个性签名"
      />
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "add_update",
  data(){
    return{
      data: {
        id: 0,
        avatar:'',
        name: '',
        mobile: '',
        email: '',
        password: '',
        sign: '',
        age: 0,
        sex: 0
      },
      fileList:[],
      avatar:''
    }
  },
  methods:{
    setData(data) {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/student/queryStudentById',
        {
          params:{
            id:data.id
          },
          headers:{jwtToken:jwtToken}
        }).then(result =>{
        if(result.data.code === 200){
          this.data = result.data.data;
          this.avatar = '../'+this.data.avatar
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getData() {
      return this.data;
    },
    selectAvatar(file,fileList) {
      let jwtToken = localStorage.getItem('jwtToken')
      let fd = new FormData()
      fd.append('file', file.raw) //传给后台接收的名字 file
      axios.post('/api/upload/image', fd,
        {headers: {'Content-Type': 'multipart/form-data',jwtToken:jwtToken}})
        .then(result => {
          console.log(result)
        //上传成功后返回的数据
        console.log("上传图片到:"+result.data);
        // 将图片地址给到表单
        this.data.avatar=result.data
          this.avatar = '../'+this.data.avatar
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  display: block;
}

.inliblock {
  display: inline-block;
}

.avatar-container {
  position: relative;
  min-height: 120px;

  .avatar-right {
    position: absolute;
    top: 0;
    left: 120px;
  }
}
</style>
